<template>
  <div class="siderBox">
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      mode="vertical"
      :unique-opened="false"
      background-color="#545c64"
      text-color="#fff"
      @select="select"
      active-text-color="#ffd04b"
      :collapse="$store.state.siderBarType == 0"
    >
      <!-- 第一层 -->
      <template v-for="(item, i) in menuList">
        <template v-if="item.children && item.children.length > 0">
          <el-submenu :index="i + ''" :key="i">
            <template v-slot:title v-if="item.isPower">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <!-- 第二层 -->

            <template v-for="(itemc, ic) in item.children">
              <!-- 如果有第三层 -->
              <template v-if="itemc.children && itemc.children.length > 0">
                <el-submenu :index="i + '-' + ic" :key="ic" v-show="itemc.isPower">
                  <template v-slot:title>
                    <span>{{ itemc.name }}</span>
                  </template>
                  <!-- 第三层 -->
                  <el-menu-item
                    :index="itemcc.routerName"
                    v-for="(itemcc, icc) in itemc.children"
                    :key="icc"
                    @click="linkTo(itemcc.routerName)"
                    v-show="itemcc.isPower"
                    >{{ itemcc.name }}</el-menu-item
                  >
                </el-submenu>
              </template>

              <!-- 如果第二层没有children -->
              <template v-else>
                <el-menu-item
                  :index="itemc.routerName"
                  :key="ic"
                  @click="linkTo(itemc.routerName)"
                  v-show="item.isPower"
                  >{{ itemc.name }}</el-menu-item
                >
              </template>
            </template>
          </el-submenu>
        </template>

        <!-- 如果只有一层 -->
        <template v-else>
          <el-menu-item :index="item.routerName" :key="i" @click="linkTo(item.routerName)">
            <i :class="item.icon"></i>
            <template v-slot:title>
              <span>{{ item.name }}</span>
            </template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'SIDERBAER',
  data() {
    return {
      defaultActive: 0, // 默认展开菜单页
      menuList: [
        {
          name: '首页',
          isPower: true,
          routerName: 'home',
          icon: 'el-icon-menu',
        },
        {
          name: '客户',
          isPower: true,
          icon: 'el-icon-location',
          children: [
            {
              name: '客户列表',
              isPower: true,
              children: [
                {
                  name: '列表1',
                  isPower: true,
                  routerName: 'customerList',
                },
                {
                  isPower: true,
                  name: '列表2',
                },
              ],
            },
            {
              isPower: true,
              name: '客户详情',
              children: [
                {
                  isPower: true,
                  name: '详情1',
                },
                {
                  isPower: true,
                  name: '详情2',
                },
              ],
            },
            {
              isPower: true,
              name: '客户资料',
            },
          ],
        },
        {
          name: '设置',
          isPower: true,
          icon: 'el-icon-s-tools',
          children: [
            {
              name: '权限管理',
              isPower: true,
              routerName: 'permissionsetting',
            },
          ],
        },
      ], // 菜单树，数据结构模仿此树编写
    };
  },
  watch: {
    $route(to) {
      this.defaultActive = to.name;
    },
  },
  created() {
    sessionStorage['powerList'] = JSON.stringify(this.menuList);
    this.defaultActive = this.$route.name;
  },
  methods: {
    // 多层级菜单展开事件
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    // 多层级菜单关闭事件
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 选中事件
    select(key, keyPath) {},
    // 选中时的跳转事件
    linkTo(val) {
      this.$router.push({
        name: val,
      });
    },
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
<style lang="scss" scoped>
@import './index.scss';
</style>
